<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item label="管辖区域：" prop="areaId">
          <el-select v-model="queryParams.areaId" placeholder="全部">
            <el-option v-for="item in areaSelect" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查询：" prop="name">
          <el-input v-model="queryParams.name" placeholder="活动名称" clearable />
        </el-form-item>
        <el-form-item label="活动时间：" prop="date">
          <el-date-picker v-model="date" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false"
            type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 380px">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="topBtn" style="margin-bottom: 14px">
        <el-tabs v-model="changeIndex" type="card" @tab-click="handleClick">
          <el-tab-pane :label="item.value" :name="item.id" v-for="(item,index) in labList" :key="index"></el-tab-pane>
        </el-tabs>
        <div>
          <el-button type="primary" @click="addActivity">新增激励活动</el-button>
        </div>
      </div>
      <el-table v-loading="loading" :data="tableList" stripe border>
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column label="管辖区域" align="center" prop="govAreaName" :show-overflow-tooltip="true" />
        <el-table-column label="活动名称" align="center" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="活动时间" align="center" prop="">
          <template slot-scope="scope">
            <p>{{scope.row.startTime}}</p>
            <p>{{scope.row.endTime}}</p>
          </template>
        </el-table-column>
        <el-table-column label="激励比例&数额" align="center" prop="incentiveValue" :show-overflow-tooltip="true" width="130">
          <template slot-scope="scope">
            <span> {{scope.row.incentiveValue}}</span>
            <span v-if="scope.row.incentiveRule==1">%</span>
            <span v-if="scope.row.incentiveRule==2">{{scope.row.incentiveType==1?'CoCo':'椰分'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="每日活动名额" align="center" prop="dailyNum" :show-overflow-tooltip="true" width="130" />
        <el-table-column label="可参与用户" align="center" prop="incentiveUserRule">
          <template slot-scope="scope">
            <dict-tag :options="incentiveUserRuleLs" :value="scope.row.incentiveUserRule" />
          </template>
        </el-table-column>
        <el-table-column label="参与店铺" align="center" prop="shopNum"></el-table-column>
        <el-table-column label="活动状态" align="center" prop="status" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="labList" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="活动已激励积分" align="center" prop="incentiveAmount">
          <template slot-scope="scope">
            {{scope.row.incentiveAmount}}
            <span>{{scope.row.incentiveType==1?'CoCo':'椰分'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="140" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="editClick(scope.row.id,'edit')" v-if="scope.row.status!=4">编辑
            </el-button>
            <el-button size="mini" type="text" @click="editClick(scope.row.id,'watch')" v-if="scope.row.status==4">查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />

    </div>
  </div>

</template>

<script>
  import {
    incentiveActivityLs,
  } from "@/api/consumeIncentiveManagement/incentiveActivities";
  import {
    userAreaSelect,
  } from "@/api/common";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  export default {
    name: "Customer",
    components: {
      ExportExcelButton,
    },
    data() {
      return {
        id: '',
        pathType: 'add',
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        tableList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          areaId: "", //管辖区域id
          endTime: "", //活动结束时间
          name: "", //活动名称
          startTime: "", //活动开始时间
          status: "", //状态 1-草稿 2-待开始 3-进行中 4-已结束 shenye_incentive_status
        },
        date: [],
        typeList: [{ //交易类型数组
          id: '',
          value: '全部',
        }, ],
        changeIndex: '0',
        labList: [], //状态lab
        areaSelect: [], //区域下拉
        incentiveUserRuleLs: [], //可参与用户字典
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.getAdminDict();
      this.getUserAreaSelect();
      this.getList();
    },
    methods: {
      handleClick(tab, event) { //状态选择
        this.changeIndex = tab.index
        this.queryParams.status = tab.name
        this.pageNum = 1
        this.getList()
      },
      addActivity() { //新增激励活动
        this.$router.push({
          path: 'addIncentiveActivities',
          query: {
            type: 'add'
          }
        })
      },
      editClick(id, type) { //编辑、查看激励活动
        this.$router.push({
          path: 'addIncentiveActivities',
          query: {
            id: id,
            type: type
          }
        })
      },
      //获取字典
      getAdminDict() {
        var dictType = "shenye_incentive_status,shenye_incentive_user_rule";
        this.$getSelectList(dictType)
          .then((res) => {
            var arr = [{
              id: "",
              value: "全部",
            }, ];
            this.labList = arr.concat(res.result[0].dictList);
            this.incentiveUserRuleLs = arr.concat(res.result[1].dictList);
          })
          .finally(() => {
            this.loading = false;
          });
      },
      getUserAreaSelect() {
        //查询用户区域下拉框
        userAreaSelect().then((res) => {
          var arr = [{
            id: "",
            value: "全部",
          }, ];
          this.areaSelect = arr.concat(res.result);
        });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        incentiveActivityLs(this.queryParams).then(response => {
          this.total = response.result.total
          this.tableList = response.result.records
          this.loading = false;

        }).finally(() => {
          this.loading = false;
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.startTime = this.date[0];
        this.queryParams.endTime = this.date[1];
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.changeIndex = '0'
        this.queryParams.status = ''
        this.date = []
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          areaId: "", //管辖区域id
          endTime: "", //活动结束时间
          name: "", //活动名称
          startTime: "", //活动开始时间
          status: "", //状态 1-草稿 2-待开始 3-进行中 4-已结束 shenye_incentive_status
        }
        this.handleQuery();
      },
    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;

  }

  .head_st {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    border-radius: 8px;
    margin-bottom: 14px;
    background: #F3F5F7;
  }

  .card_d {
    // width: 420px;
    padding: 0 0px 0 20px;
    height: 100px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    margin-right: 14px;
    background-color: #fff;
    margin-bottom: 10px;

    .list {
      display: flex;
      flex-direction: column;
      flex: 1;
      align-items: center;
      justify-content: center;
      margin-right: 20px;

      p:nth-child(1) {
        font-size: 20px;
        font-weight: bold;
        color: #555;

      }

      p:nth-child(2) {
        font-size: 18px;
        color: #555;
        margin-top: 20px;
      }
    }
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .topBtn {
    display: flex;
    justify-content: space-between;
  }

</style>
